<template>
    <div>
        <div class="card card-custom gutter-b example example-compact" id="tableBody">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">              
                    <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
                    </span>
                    <h3 class="card-label"> 查询区域 </h3>
                </div>
                <div class="card-toolbar">
                    <div class="example-tools justify-content-center">
                    <!-- 
                        <span data-toggle="tooltip" class="example-toggle"></span>
                        <span data-toggle="tooltip" class="example-copy"></span> 
                    -->
                    </div>
                </div>
            </div>
            <div class="card-body">
                <!--查询条件-->
                <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                <div class="m-portlet__body">	
                    <div class="form-group m-form__group row">                  
                    <label class="col-form-label">名称:</label>
                    <div class="col-md-2">
                        <input type="text" class="form-control" v-model="searchForm.name" placeholder="请输入">
                    </div>  
                    <label class="col-form-label">状态</label>
						<div class="col-lg-2">
                            <el-select maxlength="20" v-model="searchForm.status" placeholder="请选择">
                                <el-option value="">请选择</el-option>
                                <el-option
                                    v-for="item in [{value:'0',label:'正常'},{value:'1',label:'冻结'}]"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
						</div>               
                    <b-button :pressed="false" variant="btn btn-primary font-weight-bold mr-2" @click="search()"><span><i class="fa fa-search"></i><span>查询</span></span></b-button>
                    <b-button :pressed="false" variant="btn btn-light font-weight-bold mr-2"  @click="resetAll()"> <span><span>清空条件</span></span></b-button>
                    </div>
                </div> 
                <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                    <div class="m-form__actions m-form__actions--solid">
                    <div class="row">
                        <div class="col m--align-left">
                        <button class="btn btn-light-success font-weight-bold font-size-sm py-3 px-8 mr-2 " @click="addOauthSysMode">
                            <span><i class="la la-plus la-lg"></i><span>新 增</span></span>
                        </button>

                        <button class="btn btn-light-primary font-weight-bold font-size-sm py-3 px-8 mr-2" @click="updateOauthSysMode" :disabled="this.sels.length != 1"> 
                            <span><i class="la la-pen-alt"></i><span>编 辑</span></span>
                        </button>
                        <!-- :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
                        <button class="btn btn-light-danger font-weight-bold font-size-sm py-3 px-8 mr-2" @click="delOauthSysMode" :disabled="this.sels.length === 0"> 
                            <span><i class="far fa-trash-alt"></i><span>删 除</span></span>
                        </button>
                        </div>
                        <div class="col m--align-right">
                        
                        </div>
                    </div>
                    </div>
                </div>             
                </div>
            </div>
            <!--分页组件-->
            <el-table style="width: 100%" 
                stripe 
                border
                highlight-current-row :data="sysModeList"
                ref="enquiry"
                @selection-change="handleSelectionChange"
                :expand-row-keys="expands" 
                :row-key="getRowKeys" 
                @expand-change="expandRow"
                @row-click="handleRowClick">                
                <!-- 复选框 -->
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <el-table :data="scope.row.subList" style="text-align: center;margin:auto;width: 50%;" align="center" :header-cell-style="{ background:'#fff',height:'20px',color:'#000000',}" >
                            <el-table-column prop="name" label="名称"  min-width="120" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="mode" label="模块标记" min-width="120" show-overflow-tooltip></el-table-column>
                            <el-table-column align="center" prop="status" show-overflow-tooltip label="状态" min-width="80">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.status == 0">
                                        <span class="label label-lg label-light-primary label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">正常</span>
                                    </div>
                                    <div v-else-if="scope.row.status == 1">
                                        <span class="label label-lg label-light-danger label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">冻结</span>
                                    </div>
                                    <div v-else-if="scope.row.status == 2">
                                        <span class="label label-lg label-light-danger label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">禁用</span>
                                    </div>
                                    <div v-else>
                                        <span class="label label-lg label-light-warning label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">未知</span>
                                    </div>
                                </template>
                            </el-table-column> 
                            <el-table-column align="center" label="操作" fixed="right" min-width="120">
                                <template slot-scope="scopeSub">
                                    <!--scope.row当前行的对象-->
                                    <a href="javascript:;" @click="updateOauthSysModules(scopeSub.row,scope.row)" class="btn btn-sm btn-clean btn-icon"
                                        title="编辑资源模块">
                                        <span class="svg-icon svg-icon-primary svg-icon-2x">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect x="0" y="0" width="24" height="24"/>
                                                    <path d="M8,17.9148182 L8,5.96685884 C8,5.56391781 8.16211443,5.17792052 8.44982609,
                                                    4.89581508 L10.965708,2.42895648 C11.5426798,1.86322723 12.4640974,1.85620921 13.0496196,
                                                    2.41308426 L15.5337377,4.77566479 C15.8314604,5.0588212 16,5.45170806 16,5.86258077 L16,
                                                    17.9148182 C16,18.7432453 15.3284271,19.4148182 14.5,19.4148182 L9.5,19.4148182 C8.67157288,
                                                    19.4148182 8,18.7432453 8,17.9148182 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000000, 10.707409) rotate(-135.000000) translate(-12.000000, -10.707409) "/>
                                                    <rect fill="#000000" opacity="0.3" x="5" y="20" width="15" height="2" rx="1"/>
                                                </g>
                                            </svg>
                                        </span>
                                    </a>
                                    <!--scope.row当前行的对象-->
                                    <a href="javascript:;" v-if="scopeSub.row.sys_modules_status ==0" @click="delOauthSysModules(scopeSub.row,scope.row)" class="btn btn-sm btn-clean btn-icon"
                                        title="冻结资源模块">
                                        <span class="svg-icon svg-icon-danger svg-icon-2x">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">	                                    
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">	                                       
                                                    <rect x="0" y="0" width="24" height="24"></rect>	                                        
                                                    <path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" 
                                                    fill="#000000" fill-rule="nonzero"></path>	                                        
                                                    <path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,
                                                        4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,
                                                        6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3">
                                                    </path>	                                    
                                                </g>	                                
                                            </svg>	       
                                        </span>
                                    </a>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column label="序号" min-width="50">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="name" show-overflow-tooltip label="隶属平台" min-width="100"></el-table-column>
                <el-table-column align="center" prop="status" show-overflow-tooltip label="状态" min-width="100">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 0">
                            <span
                                class="label label-lg label-light-primary label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">正常</span>
                        </div>
                        <div v-else-if="scope.row.status == 1">
                            <span
                                class="label label-lg label-light-success label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">冻结</span>
                        </div>
                        <div v-else-if="scope.row.status == 2">
                            <span
                                class="label label-lg label-light-danger label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">禁用</span>
                        </div>
                        <div v-else>
                            <span
                                class="label label-lg label-light-warning label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">未知</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="icon" show-overflow-tooltip label="图标">
                    <template slot-scope="scope">
                        <i class="menu-icon text-dark-50" :class="scope.row.icon">                    
                        <span></span>
                        </i>
                    </template>
                </el-table-column>
                <el-table-column align="center" show-overflow-tooltip prop="createTime" label="创建日期" min-width="200">
                </el-table-column>
                <el-table-column align="center" prop="updateTime" label="修改日期" min-width="160"></el-table-column>
                <el-table-column align="center" label="操作" fixed="right" min-width="240">
                    <template slot-scope="scope">
                        <!--scope.row当前行的对象-->
                        <a href="javascript:;" @click="getOauthSysModeDetail(scope.row)" class="btn btn-sm btn-clean btn-icon" title="详情">	                            
                            <span class="svg-icon svg-icon-primary svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"/>
                                        <path d="M19.2078777,9.84836149 C20.3303823,11.0178941 21,12 21,12 C21,12 16.9090909,18 12,18 C11.6893441,18 11.3879033,17.9864845 11.0955026,17.9607365 L19.2078777,9.84836149 Z" fill="#000000" fill-rule="nonzero"/>
                                        <path d="M14.5051465,6.49485351 L12,9 C10.3431458,9 9,10.3431458 9,12 L5.52661464,15.4733854 C3.75006453,13.8334911 3,
                                        12 3,12 C3,12 5.45454545,6 12,6 C12.8665422,6 13.7075911,6.18695134 14.5051465,6.49485351 Z" fill="#000000" fill-rule="nonzero"/>
                                        <rect fill="#000000" opacity="0.3" transform="translate(12.524621, 12.424621) rotate(-45.000000) translate(-12.524621, -12.424621) " x="3.02462111" y="11.4246212" width="19" height="2"/>
                                    </g>
                                </svg>
                            </span>		
                        </a>
                        <a href="javascript:;" @click="addOauthSysModules(scope.row)" class="btn btn-sm btn-clean btn-icon"
                            title="创建资源模块">
                            <span class="svg-icon svg-icon-primary svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"/>
                                        <circle fill="#000000" opacity="0.3" cx="12" cy="12" r="10"/>
                                        <path d="M11,11 L11,7 C11,6.44771525 11.4477153,6 12,6 C12.5522847,6 13,6.44771525 13,7 L13,
                                        11 L17,11 C17.5522847,11 18,11.4477153 18,12 C18,12.5522847 17.5522847,13 17,
                                        13 L13,13 L13,17 C13,17.5522847 12.5522847,18 12,18 C11.4477153,18 11,17.5522847 11,
                                        17 L11,13 L7,13 C6.44771525,13 6,12.5522847 6,12 C6,11.4477153 6.44771525,11 7,11 L11,11 Z" fill="#000000"/>
                                    </g>
                                </svg>
                            </span>
                        </a>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    hide-on-single-page   
                    @size-change="handleSizeChange"        
                    @current-change="handleCurrentChange"  
                    :current-page="pageNo"                
                    :page-sizes="[5, 10, 30, 50]"          
                    :page-size="pageSize"			  
                    layout="->,total, sizes, prev, pager, next, jumper"
                    :total="totalCount">		
                </el-pagination>
            </div>
        </div>
        <OauthSysModeAdd ref="oauthSysModeAddRef" @change="search"></OauthSysModeAdd><!--采用父窗口关闭传递的方法-->
        <OauthSysModeUpdate ref="oauthSysModeUpdateRef" @change="search"></OauthSysModeUpdate><!--采用父窗口关闭传递的方法-->
        <OauthSysModeDetail ref="oauthSysModeDetailRef"></OauthSysModeDetail>
        <OauthSysModulesAdd ref="oauthSysModulesAddRef" @change="search"></OauthSysModulesAdd><!--采用父窗口关闭传递的方法-->
        <OauthSysModulesUpdate ref="oauthSysModulesUpdateRef" @change="search"></OauthSysModulesUpdate><!--采用父窗口关闭传递的方法-->
    </div>
</template>
  
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";

import OauthSysModeAdd from "@/view/oauth/oauth-sys-mode/oauth-sys-mode-add.vue";
import OauthSysModeUpdate from "@/view/oauth/oauth-sys-mode/oauth-sys-mode-update.vue";
import OauthSysModeDetail from "@/view/oauth/oauth-sys-mode/oauth-sys-mode-detail.vue";
import OauthSysModulesAdd from "@/view/oauth/oauth-sys-mode/oauth-sys-modules-add.vue";
import OauthSysModulesUpdate from "@/view/oauth/oauth-sys-mode/oauth-sys-modules-update.vue";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            searchForm: {name:"",status:""},
            sysModeList: [],
            subList: [],
            expands: [],
            sels: [], //当前选框选中的值
            pageNo:1,      // 默认当前是第一页
            pageSize:5,    // 当前每页的数据是5条
            totalCount:0   // 总数默认为0
        }
    },
    components: {
        OauthSysModeAdd,
        OauthSysModeUpdate,
        OauthSysModeDetail,
        OauthSysModulesAdd,
        OauthSysModulesUpdate
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "授权中心子系统" }]);
        this.initList();   // 按当前的页号和每页的数据量进行查询
    },
    methods: {
        handleSelectionChange(sels) {//获取选中的值
            this.sels = sels;
        },
        handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
            this.pageSize = val;  // 修改页的大小
            this.initList();       // 按新的pageNo和pageSize进行查询
        },
        handleCurrentChange(val) { // 修改当前页所触发的函数
            this.pageNo = val;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        handleRowClick(row, event, column) {
            //点击行展开，enquiry为主表table的ref属性值
            this.$refs.enquiry.toggleRowExpansion(row);
        },
        initList() {
            showWating({ renderBody: "tableBody" });
            let params = {};
            params.usePageNo = true;//采用第几页进行分页（兼容）
            params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
            params.pageNo = this.pageNo;//开始的记录序号   
            params.searchJson = JSON.stringify(this.searchForm);//为form元素     
            apiUtil.queryPage(process.env.VUE_APP_OAUTH_API+"/oauthSysMode/list", params).then(({ data }) => {
            this.sysModeList = data.data;//给结果集赋值
            this.totalCount = data.total;// 获取当前数据的总数    
            });
        },
        getRowKeys(row) {
            return row.id;
        },
        expandRow:function(row, expandedRows) {//展开与收缩事件
            let _this = this;
            if(_this.expands.indexOf(row.id) >= 0){//收缩事件                
                let newExpands=[];
                for(let i=0; i<this.expands.length; i++){
                    if(this.expands[i]!=row.id){
                        newExpands.push(this.expands[i]);
                    }
                }
                _this.expands=newExpands;
                return;
            }else{
                this.getSubList(row);//展开事件
            }
        },
        getSubList(row) {            
            //遍历主表dataList
            this.sysModeList.forEach((item, index) => {
                if(item.id == row.id){//判断当前展开的行      
                    showWating({renderBody:"tableBody"});          
                    //请求子表后台接口
                    var params = {};
                    apiUtil.post(process.env.VUE_APP_OAUTH_API + "/oauthSysModules/list/"+item.id, params).then(({ data }) => {
                        this.sysModeList[index].subList = data.data;//给结果集赋值
                        //如果需要默认展开所有行，将:row-key="getRowKeys"得到的Id添加到expands数组
                        //直接使用属性default-expand-all会使子表数据显示不出来，索性全部加到this.expands
                        this.expands.push(item.id)
                    });
                }                
            })
        },
        addOauthSysMode(){//新建
            this.$refs.oauthSysModeAddRef.showModal()
        },
        updateOauthSysMode(){// 更新
            if(this.sels.length != 1){
            handleAlert("请选择一条数据", "warning", 3)
            return;
            }
            let id = this.sels[0].id;
            this.$refs.oauthSysModeUpdateRef.showModal(id);
        },
        delOauthSysMode(){ // 删除
            if(this.sels.length === 0){
            handleAlert("请选择删除的数据", "warning", 3)
            return;
            }
            // 删除前提示
            this.$confirm("确认删除记录吗?", "提示", {type: "warning",}).then(() => {
            let ids = this.sels.map((item) => item.id);
            // 根据后台想要的参数格式选择
            // console.log(ids.join(",")); //1,2,3,4
            // console.log(ids); //[1,2,3,4]
            apiUtil.delete(process.env.VUE_APP_OAUTH_API+"/oauthSysMode/delete?id="+ids.join(",")).then(data=>{
                if(data.data.success){
                handleAlert("删除成功", "success", 3);
                this.search();
                }else {
                handleAlert("删除失败", "error", 3);
                }
            });
            }).catch(()=>{});//注意这里，这里是重点！！！;        
        },
        search() {
            this.pageNo = 1;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        resetAll() {
            Object.assign(this.$data.searchForm, this.$options.data().searchForm);
            this.search();
        },
        addOauthSysModules(row) {
            console.log(row);
            this.$refs.oauthSysModulesAddRef.showModal(row.id,row.name);
        },
        updateOauthSysModules(row,parentRow){//编辑资源模块
            this.$refs.oauthSysModulesUpdateRef.showModal(row.id);
        },
        delOauthSysModules(row,parentRow) {//冻结资源模块
            this.$confirm('确定要冻结'+row.sys_modules_name, "提示", { type: "warning", }).then(() => {
                var params = { id: row.id};               
                apiUtil.delete(process.env.VUE_APP_OAUTH_API + '/oauthSysModules/delete', params).then(data => {
                    if (data.data.success) {
                        handleAlert("冻结成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("冻结失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;
        },
        getOauthSysModeDetail(row){
            this.$refs.oauthSysModeDetailRef.showModal(row.id);
        }
    }
};
</script>